<template>
  <div class="app-container">

    <!--这一行写天气接口-->
    <el-row class="weather-container">
      <weather></weather>
    </el-row>

    <el-row>
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="userQuery.phone" placeholder="电话号"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="userQuery.sex" clearable placeholder="全部">
            <el-option :value="0" label="女"/>
            <el-option :value="1" label="男"/>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>

        <!--跳转到friend路由-->
        <!--按钮还需要改，我想改成只有一个图标的按钮-->
        <router-link :to="'/friend/save'" style="margin-left: 20px">
          <el-tooltip effect="dark" content="保存好友" placement="top">
            <el-button circle>
              <span class="svg-container">
                    <svg-icon icon-class="user-plus"/>
                </span>
            </el-button>
          </el-tooltip>
        </router-link>
        <router-link :to="getDynamicRoute()">
          <el-tooltip effect="dark" content="黑名单" placement="top">
            <!--              <el-button type="danger" icon="el-icon-circle-close" circle></el-button>-->
            <el-button circle>
                <span class="svg-container">
                    <svg-icon icon-class="user-off"/>
                </span>
            </el-button>
          </el-tooltip>
        </router-link>
        <router-link :to="'/thing/list'">
          <el-tooltip effect="dark" content="事件列表" placement="top">
            <el-button icon="el-icon-message" circle></el-button>
            <!--              <el-button type="success" icon="el-icon-message" circle></el-button>-->
          </el-tooltip>
        </router-link>

      </el-form>
    </el-row>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      class="custom-table">
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!--显示图片-->
      <el-table-column  prop="picture" label="头像" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.avatar+'?imageView2/1/w/80/h/80'"
               :class="{'user-avatar':true, 'bw-image':isBlackAndWhite}"
               style="max-width: 50px ; max-height:50px;">
        </template>
      </el-table-column>
      <el-table-column prop="friendName" label="姓名" width="80"/>
      <el-table-column label="性别" width="80">
        <template slot-scope="scope">
          {{ scope.row.sex === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <!--      <el-table-column prop="id" label="id"/>-->
      <el-table-column prop="address" label="地址"/>
      <el-table-column prop="phone" label="电话" width="250"/>
      <el-table-column class="hidden-phone" prop="postcode" label="邮政编码" width="200"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <!--跳转到friend路由-->
          <router-link :to="'/friend/show/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">详情</el-button>
          </router-link>
          <!--根据不同的路由地址选择不同的组件,执行不同的方法-->
          <el-button
            :type="buttonType"
            size="mini"
            :icon="buttonIcon"
            @click="buttonAction(scope.row.id)"
          >
            {{ buttonLabel }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!--@是绑定事件，分页切换由element-ui实现-->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>


<script>
import user from '@/api/edu/friend'
import weather from '@/views/edu/weather/day.vue'

export default {
  name: 'List',
  //引入外部天气模板
  components: {
    weather,
  },
  data() {
    return {
      listLoading: false,
      addImagePath: 'http://plutoc.icu/images/me.jpg?imageView2/1/w/80/h/80',
      list: [], // 查询之后接口返回的
      page: 1, // 当前页
      limit: 10, // 每页查询数
      total: 0, // 总记录数
      userQuery: {},// 条件封装对象
    }
  },
  created() { // 调用methods里的方法
    this.getList()
  },
  watch: {
    '$route.path': {
      immediate: true, // 立即触发回调函数
      handler(to, from) {
        // console.log("触发路由路径监听")
        // 执行数据获取操作
        this.getList(1);
      }
    }
  },
  computed: {
    buttonType() {
      const currentRoute = this.$route;
      if (currentRoute.path === '/dashboard' || currentRoute.path === '/friend/table') {
        return 'danger';
      } else if (currentRoute.path === '/friend/shield') {
        return 'success';
      }
      return '';
    },
    buttonLabel() {
      const currentRoute = this.$route;
      if (currentRoute.path === '/dashboard' || currentRoute.path === '/friend/table') {
        return '屏蔽';
      } else if (currentRoute.path === '/friend/shield') {
        return '恢复';
      }
      return '';
    },
    buttonIcon() {
      const currentRoute = this.$route;
      if (currentRoute.path === '/dashboard' || currentRoute.path === '/friend/table') {
        return 'el-icon-delete';
      } else if (currentRoute.path === '/friend/shield') {
        return 'el-icon-view';
      }
      return '';
    },
    isBlackAndWhite() {
      const currentRoute = this.$route;
      if (currentRoute.path === '/friend/table') {
        return false;
      } else if (currentRoute.path === '/friend/shield') {
        return true;
      }
    },
  },
  methods: { // 调用teacher.js里的方法
    // 讲师列表方法
    getList(page = 1) {
      this.page = page;
      let path = this.$route.path;
      //访问条件上加一个黑名单用户
      if (path === '/friend/shield') {
        this.userQuery.shield = 1;
      } else {
        //清空是否查询黑名单状态
        this.userQuery.shield = null;
      }
      // console.log("当前路由路径" + path + "查询对象" + this.userQuery.shield)
      user.getUserListPage(this.page, this.limit, this.userQuery)
        .then(response => {
          // response返回的结果数据
          this.list = response.data.rows;
          this.total = response.data.total;
        }) // 成功
        .catch(error => {
          console.log(error)
        })
    },
    getDynamicRoute() {
      const currentRoute = this.$route;
      if (currentRoute.path === '/friend/table' || currentRoute.path === '/dashboard') {
        return '/friend/shield'
      } else if (currentRoute.path === '/friend/shield') {
        return '/friend/table'
      }
    },
    buttonAction(id) {
      const currentRoute = this.$route;
      if (currentRoute.path === '/dashboard' || currentRoute.path === '/friend/table') {
        this.removeFriendById(id)
      } else if (currentRoute.path === '/friend/shield') {
        this.recoveryFriendById(id)
      }
    },
    resetData() {
      // 表单输入项清空
      this.userQuery = {}
      // 查询所有数据
      this.getList()
    },
    removeFriendById(id) {
      this.$confirm('此操作将屏蔽该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        // 调用删除的方法
        user.shieldFriend(id)
          .then(response => { // 删除成功
            // 提示信息
            this.$message({
              type: 'success',
              message: '屏蔽成功!'
            })
            // 回到列表页面
            this.getList()
          })
      })
    },
    //恢复用户
    recoveryFriendById(id) {
      this.$confirm('此操作将恢复该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        // 调用恢复的方法
        user.recoveryFriend(id)
          .then(response => { // 删除成功
            // 提示信息
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
            // 回到列表页面
            this.getList()
          })
      })
    }
  }
}
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/*设置距离*/
.button-container2 {
  margin: 0 10px;
}

/*黑白照片*/
.bw-image {
  filter: grayscale(100%);
}

/*容器距离顶部高度，之前是20*/
.app-container {
  padding: 0px;
}
/*我的手机在min是361px之间*/
/*@media screen and (min-width: 200px) and (max-width: 450px) {*/
  .hidden-phone{
    display: none;
  }
/*}*/
</style>
